import 'dart:html';

import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gongge/bean/LanguageBean.dart';
import 'package:gongge/pages/SplishPage.dart';
import 'package:provider/provider.dart';
import 'dart:math' as math;
import '../config/AppConst.dart';
import '../livedata/LanguageProvider.dart';
import '../utils/ PanPageRouteBuilder.dart';
import '../utils/AudioUtils.dart';
import '../utils/ClickUtils.dart';
import '../utils/CommUtils.dart';
import '../utils/SpUtils.dart';

import '../wight/Seting.dart';

// 第一次进来语言设置
class StartLanguagePage extends StatefulWidget {
  StartLanguagePage({
    Key? key,
  }) : super(key: key);

  @override
  State<StartLanguagePage> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<StartLanguagePage> {
  @override
  void initState() {
    langeList.clear();
    LanguageBean languageBean1 = LanguageBean();
    languageBean1.lg = "en";
    languageBean1.text = "English";
    langeList.add(languageBean1);
    LanguageBean languageBean2 = LanguageBean();
    languageBean2.lg = "zh";
    languageBean2.text = "中文";
    langeList.add(languageBean2);
    LanguageBean languageBean3 = LanguageBean();
    languageBean3.lg = "th";
    languageBean3.text = "ภาษาไทย";
    langeList.add(languageBean3);
    LanguageBean languageBean4 = LanguageBean();
    languageBean4.lg = "vi";
    languageBean4.text = "ViệtName";
    langeList.add(languageBean4);
    LanguageBean languageBean5 = LanguageBean();
    languageBean5.lg = "id";
    languageBean5.text = "IndonesiaName";
    langeList.add(languageBean5);
    LanguageBean languageBean6 = LanguageBean();
    languageBean6.lg = "pt";
    languageBean6.text = "Português";
    langeList.add(languageBean6);
    LanguageBean languageBean7 = LanguageBean();
    languageBean7.lg = "es";
    languageBean7.text = "Español";
    langeList.add(languageBean7);
    LanguageBean languageBean8 = LanguageBean();
    languageBean8.lg = "fr";
    languageBean8.text = "Français";
    langeList.add(languageBean8);
    LanguageBean languageBean9 = LanguageBean();
    languageBean9.lg = "de";
    languageBean9.text = "Deutsch";
    langeList.add(languageBean9);
    LanguageBean languageBean10 = LanguageBean();
    languageBean10.lg = "ru";
    languageBean10.text = "русский язык";
    langeList.add(languageBean10);
    //监听窗口变化
    //   window.onResize.listen((event) {

    //  });

    super.initState();
  }

  var imgList = [
    "assets/images/checkerboard.png",
    "assets/illustration/Illustration_1_Background.png",
    "assets/illustration/Illustration_2_Background.png",
    "assets/illustration/Illustration_3_Background.png",
    "assets/illustration/Illustration_4_Background.png",
    "assets/illustration/Illustration_5_Background.png",
    "assets/illustration/Illustration_6_Background.png",
    "assets/illustration/Illustration_7_Background.png",
    "assets/illustration/Illustration_8_Background.png",
    "assets/illustration/Illustration_9_Background.png",
    "assets/illustration/Illustration_10_Background.png",
    "assets/illustration/Illustration_11_Background.png",
    "assets/illustration/Illustration_12_Background.png",
    "assets/illustration/Illustration_13_Background.png",
    "assets/illustration/Illustration_14_Background.png",
    "assets/illustration/Illustration_15_Background.png",
    "assets/illustration/Illustration_16_Background.png",
    "assets/illustration/Illustration_17_Background.png",
    "assets/illustration/Illustration_18_Background.png",
    "assets/illustration/Illustration_19_Background.png",
    "assets/illustration/Illustration_20_Background.png",
    "assets/illustration/Illustration_21_Background.png",
    "assets/illustration/Illustration_22_Background.png",
    "assets/illustration/Illustration_23_Background.png",
    "assets/illustration/Illustration_reset.png",
    "assets/illustration/Illustration_Surfacing_1.png",
    "assets/illustration/Illustration_Surfacing_2.png",
    "assets/badge/1.png",
    "assets/badge/2.png",
    "assets/badge/3.png",
    "assets/badge/4.png",
    "assets/badge/5.png",
    "assets/badge/6.png",
    "assets/badge/7.png",
    "assets/badge/8.png",
    "assets/badge/9.png",
    "assets/badge/10.png",
    "assets/badge/11.png",
    "assets/badge/12.png",
    "assets/badge/13.png",
    "assets/badge/14.png",
    "assets/badge/15.png",
    "assets/badge/16.png",
    "assets/badge/17.png",
    "assets/badge/18.png",
    "assets/badge/19.png",
    "assets/badge/20.png",
    "assets/badge/21.png",
    "assets/badge/22.png",
    "assets/badge/23.png",
    "assets/badge/24.png",
    "assets/badge/25.png",
    "assets/badge/26.png",
    "assets/badge/27.png",
    "assets/badge/28.png",
    "assets/badge/29.png",
    "assets/badge/30.png",
    "assets/badge/31.png",
    "assets/badge/32.png",
    "assets/badge/33.png",
    "assets/badge/34.png",
    "assets/badge/35.png",
    "assets/badge/36.png",
    "assets/badge/36.png"
        "assets/gif/1.11.gif",
    "assets/images/bg_blue.png",
    "assets/images/bg_calendar.png",
    "assets/images/bg_classic.png",
    "assets/images/bg_seting.png",
    "assets/images/daily.png",
    "assets/images/daily_on.png",
    "assets/images/logo.png",
    "assets/images/my.png",
    "assets/images/my_on.png",
    "assets/images/travel_bottom.png",
    "assets/images/travel_left.png",
    "assets/images/travel_right.png",
    "assets/images/travel_top.png",
    "assets/images/trivel.png",
    "assets/images/trivel_on.png",
    "assets/images/travel_commple.png",
    "assets/images/travel_num.png",
    "assets/images/tab_bg.png",
    "assets/images/back.png",
    "assets/images/button_blue.png",
    "assets/images/calendar.png",
    "assets/images/classic.png",
    "assets/images/classic_on.png",
  ];

  @override
  void didChangeDependencies() {
    load();
    super.didChangeDependencies();
  }

  void load()  async {
    //预先加载图片资源，方便使用更快
    for (int i = 0; i < imgList.length; i++) {
      precacheImage(AssetImage(imgList[i]), context);
    }
  }

  @override
  Widget build(BuildContext context) {
    double hight = CommUtils.getHeight(context);
    double width = CommUtils.getWidth(context);

    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage('assets/images/bg.png'), fit: BoxFit.fill),
        ),
        alignment: Alignment.center,
        child: Container(
          margin: EdgeInsets.only(
              left: ScreenUtil().setWidth(width * 0.03),
              right: ScreenUtil().setWidth(width * 0.03)),
          height: ScreenUtil().setHeight(hight * 0.55),
          // width: ScreenUtil().setHeight(wight * 0.5),
          decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage('assets/images/bg_seting.png'),
                fit: BoxFit.fill),
          ),
          child: Padding(
            padding: EdgeInsets.only(
                left: width * 0.08,
                top: hight * 0.08,
                right: width * 0.08,
                bottom: hight * 0.05),
            child: getSeing(width, hight),
          ),
        ),
      ),
    );
  }

  List<LanguageBean> langeList = [];
  /**
 * 中间的设置
 */
  Widget getSeing(double width, double hight) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Expanded(
            child: ListView.separated(
                //   shrinkWrap: true, // 加上这个就不会因为高度问题报错
                scrollDirection: Axis.vertical,
                itemBuilder: (context, index) {
                  return GestureDetector(
                    //点击空白页也有反应
                    behavior: HitTestBehavior.opaque,
                    onTap: () {
                      if (ClickUtils.checkClick()) {
                        AudioUtils.getInstance()?.play("seting_.mp3");
                        language = langeList[index].lg;
                        setState(() {});
                      }
                    },
                    child: Column(mainAxisSize: MainAxisSize.min, children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          AutoSizeText(
                            langeList[index].text!,
                            style: TextStyle(
                              fontSize: ScreenUtil().setSp(15),
                              fontWeight: FontWeight.bold,
                              color: Color.fromRGBO(255, 255, 255, 1),
                              height: 1.2,
                            ),
                            maxLines: 1,
                            textAlign: TextAlign.center,
                          ),
                          getType(langeList[index].lg!),
                        ],
                      ),
                      Container(
                        margin: EdgeInsets.symmetric(
                            vertical: boxDistance,
                            horizontal: ScreenUtil().setWidth(10)),
                        child: Image.asset(
                          'assets/images/line.png',
                          width: width,
                          fit: BoxFit.fill,
                        ),
                      ),
                    ]),
                  );
                },
                physics: BouncingScrollPhysics(),
                separatorBuilder: (BuildContext context, int index) =>
                    VerticalDivider(),
                itemCount: langeList.length)),
        getTop(width, hight),
      ],
    );
  }

/**
 * 下一步跳转
 */
  Widget getTop(double width, double hight) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        GestureDetector(
          onTap: () {
            if (language == null) {
              return;
            }
            if (ClickUtils.checkClick()) {
              Provider.of<LanguageProvider>(context, listen: false)
                  .changeMode(language!);
              AudioUtils?.getInstance()?.play("seting_.mp3");
              Navigator.pop(context);

              SpUtils.getInstance()?.setBool(AppConst.choiceLanguage, true);
              Navigator.push(
                  context,
                  PanPageRouteBuilder(
                      builder: (context) => SplishPage(),
                      popDirection: AxisDirection.down));
            }
          },
          child: language == null
              ? Image.asset("assets/images/button_back2.png",
                  width: ScreenUtil().setHeight(width * 0.15),
                  height: hight * 0.06,
                  fit: BoxFit.contain)
              : Transform.rotate(
                  angle: -math.pi,
                  child: Image.asset("assets/images/button_back.png",
                      width: ScreenUtil().setHeight(width * 0.15),
                      height: hight * 0.06,
                      fit: BoxFit.contain),
                ),
        ),
      ],
    );
  }

  String? language;

  Widget getType(String tag) {
    if (language != null && language == tag) {
      return Image.asset('assets/images/gou.png',
          width: ScreenUtil().setWidth(24),
          height: ScreenUtil().setHeight(24),
          fit: BoxFit.contain);
    } else {
      return Container();
    }
  }
}
